<template>
  <div>
    <div>
      <el-button @click="locale = 'zh'">中文</el-button>
      <el-button @click="locale = 'en'">Englisg</el-button>
      <span>{{ t('sayHi') }}</span>
    </div>
    <!-- <el-button>{{ t(messages.sayHi) }}</el-button> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      locale: 'zh',
      messages: {
        zh: {
          sayHi: '你好'
        },
        en: {
          sayHi: 'Hello'
        }
      }
    }
  },
  methods: {
    t(str) {
      const dict = this.messages[this.locale]
      const res = dict[str]
      return res
    }
  }
}
</script>

<style>

</style>
